<template>
<div>
  <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="shopOption"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @on-load="getDataList">

      <template slot-scope="scope"
                slot="province">
        {{scope.row.province+scope.row.city+scope.row.area+scope.row.shopAddress||"地址为定义"}}
      </template>

      <template slot-scope="scope"
                slot="menu">           
        <template v-if="scope.row.state == 0">
          <el-button size="small">审核已通过</el-button>
          <el-button type="primary" size="small" @click.stop="openShopDetails(scope.row,false)">查看信息</el-button>               
        </template>
        <template v-else-if="scope.row.state == 2">
          <el-button size="small">审核未通过</el-button>                  
          <el-button type="warning" size="small" @click="openChangeInfo(scope.row)" >编辑信息</el-button>                   
        </template>                   
        <template v-else>
          <el-button type="primary"
                    class="edit"
                    icon="el-icon-edit"
                    size="small"
                    @click.stop="openShopDetails(scope.row,true)">审核</el-button>
          <!-- <el-button type="danger"
                    class="edit"
                    icon="el-icon-edit"
                    size="small"
                    @click.stop="changeShopState([scope.row.shopId,'not'])">不予通过</el-button> -->
        </template>
                   
      </template>
    </avue-crud>
    <!-- 弹窗, 新增 / 修改 -->

    <!-- 展示店铺详细信息 -->
    <shopDetailsAndBindAgent ref="shopDetails" @refresh = "getDataList"></shopDetailsAndBindAgent>

    <shopChangeInfo ref="shopChangeInfo" @refresh = "getDataList"></shopChangeInfo>
    
    <!-- 绑定供应商弹窗 -->
    <!-- <el-dialog
        title=""
        :visible.sync="chooseAgentVisible"
        :close-on-click-modal="false"
        top="8vh"
        width="70%"
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="agentList"
                :option="agentOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="chooseAgent(scop.row)">确定</el-button>
            </template>                
        </avue-crud>            
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog> -->

</div>
</template>

<script>
import { shopOption } from '@/crud/shop/shop'
import { agentOption } from '@/crud/shop/agent'
import shopDetailsAndBindAgent from './shopDetailsAndBindAgent'
import shopChangeInfo from './shop-changeInfo'
export default {
    data() {
      return {
        agentList: [],
        agentOption: agentOption,
        chooseAgentVisible:false,
        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        shopOption: shopOption,
        addOrUpdateVisible :false,
        shopInfo:'',
        choosedShop:{
          shopId: '',
          state: '',
          agentId: ''
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
      }
    },
    components:{
      shopDetailsAndBindAgent,
      shopChangeInfo,
    },
    methods: {
      getDataList (page) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/shop/shopDetail/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
              current:page == null? this.page.currentPage : page.currentPage,
              size:page == null? this.page.pageSize : page.pageSize,
            },
            this.params
            )
          )
        }).then(({ data }) => {
          console.log(data.records);
          
          this.dataList = data.records
          this.page.total = data.total
          this.dataListLoading = false
        }).catch((err) =>{
        })
      },

      searchChange (params,done) {
        this.params = params
        this.getDataList(this.page)
        done()
    },

      selectionChange (val) {
        this.dataListSelections = val
    },
      
    //更改店铺审核状态为 审核通过
    // changeShopState([id,isPass]){
    //   console.log(id,isPass);
    //   this.choosedShop.shopId = id
    //   if (isPass == 'pass') {
    //     this.chooseAgentVisible = true
    //     this.choosedShop.state = 0
    //     this.$http({
    //       url: this.$http.adornUrl('/shop/shopDetail/AgentInfo'),
    //       method: 'get',
    //       params: this.$http.adornParams()
    //     }).then(({data}) =>{
    //       this.agentList = data
    //       console.log(this.agentList);
    //     })
    //   }else{
    //     this.choosedShop.state = 2
    //   }   
    // },

    //选择区域负责人
    chooseAgent(agent){
      this.$http({
        url: this.$http.adornUrl("/shop/shopDetail/shopState"),
        // url: this.$http.adornUrl("/shop/shopDetail/shopState?shopId="+id+"&state="+(isPass==='pass'?0:2)),
        method: 'put',
        params: this.$http.adornParams({
          shopId: this.choosedShop.shopId,
          state: this.choosedShop.state,
          agentId: agent.agentId  
        })
      }).then(({data}) => {
        // console.log(data);
        this.chooseAgentVisible = false
        this.getDataList()  
        this.$message({
          type:'success',
          message:'该店铺通过审核！'
        })                          
      })
    },

    //更改店铺审核状态为 审核通过
    openShopDetails(row,ifShowChangeBtn){      
      let component = this.$refs.shopDetails.init(row,ifShowChangeBtn)
    },

    openChangeInfo(row){
      this.$refs.shopChangeInfo.init(row)
    },
    

    //   this.$confirm("此操作将通过该店铺审核，是否继续？",'提示',{
    //     confirmButtonText:'确定',
    //     cancelButtonText:'取消',
    //     type:'warning'
    //   }).then(()=>{

    //     this.$http({
    //       url: this.$http.adornUrl("/shop/shopDetail/shopState?shopId="+id+"&state="+(isPass==='pass'?0:2)),
    //       method: 'put',
    //     }).then(({data}) => {
    //       console.log(data);
          
    //       this.getDataList()  
    //       this.$message({
    //         type:'success',
    //         message:'该店铺通过审核！'
    //       })                          
    //     })
    // }).catch(()=>{
    //   this.$message({
    //     type:'info',
    //     message:'取消操作'
    //   })
    // })

      
  },
    
}
</script>

<style scoped>
/* .el-tooltip.el-input.el-input--small.el-input--suffix.avue-input {
    width: 100%;
} */
</style>>


